{% extends "../_base/layout.html" %} 

{% block css %}
<link rel="stylesheet" href="{{site.static}}/css/login.css"> 
{% endblock %} 

{% block js %}
<script src="{{site.static}}/js/register/phone.js"></script>
{% endblock %} 

{% block content %}
<div class="page-container">
    <div class="register-phone-input" id="register_phone_input">
        <div class="back-icon-wrap">
            <a class="eui-icon eui-icon-back" href="javascript:history.go(-1);"></a>
        </div>    
        <h1 class="eui--blue-color eui--font-w-normal eui--font-48 eui--text-center page-title">{{__("register_phone_page_title")}}</h1>
        <p class="page-title-second eui--556c96-color eui--font-26">{{__("register_phone_tips")}}</p>
    
        <div class="eui-login-form eui--margin-t-0">
            <div class="eui-form-group eui--clearfix">
                <label for="name" class="eui-lable eui--font-26 eui--pull-left">
                    {{__("area")}}
                </label>
                <div class="eui-select-wrap eui--overflow-h eui--pull-left eui--position-rel">
                    <select name="area-select" id="" class="eui-select eui--position-rel">
                        <option value="MY">{{__("area_Malaysia")}}</option>
                        <option value="SG">{{__("area_Singapore")}}</option>
                        <option value="ID">{{__("area_Indonesia")}}</option>
                        <option value="PH">{{__("area_Philippines")}}</option>
                        <option value="AU">{{__("area_Australia")}}</option>
                        <option value="US">{{__("area_United_States")}}</option>
                        <option value="TH">{{__("area_Thailand")}}</option>
                        <option value="VN">{{__("area_Vietnam")}}</option>
                        <option value="UK">{{__("area_United_Kingdom")}}</option>
                        <option value="CA">{{__("area_Canada")}}</option>                    
                        <option value="NZ">{{__("area_new_Zealand")}}</option>
                        <option value="DE">{{__("area_Germany")}}</option>
                        <option value="RU">{{__("area_Russia")}}</option>
                        <option value="IT">{{__("area_Italy")}}</option>
                        <option value="FR">{{__("area_France")}}</option>
                        <option value="SA">{{__("area_Saudi_Arabia")}}</option>
                        <option value="UA">{{__("area_Ukraine")}}</option>
                        <option value="TW">{{__("area_Taiwan")}}</option>
                        <option value="HK">{{__("area_HongKong")}}</option>
                        <option value="MO">{{__("area_Macao")}}</option>
                        <option value="OT">{{__("area_other")}}</option>
                    </select>
                    <span class="eui-icon eui-icon-arrow_down_dark_grey eui--position-abs"></span>
                </div>
            </div>
            <div class="eui-form-group">
                <label for="phone" class="eui-lable eui--font-26 eui--black-color">{{__("phone")}}</label>
                <input id="phone" class="eui-input eui--font-26" type="text" placeholder="{{__('phone_input_tips')}}">
            </div>
            <a class="eui-btn eui--width-100 eui-btn-lg eui-btn-primary" id="btn_phone_input" href="javascript:;">{{__("btn_send_code")}}</a>
        </div>
    </div>

    <div class="register-phone-code eui--hide" id="register_phone_code">
        <div class="back-icon-wrap">
            <a class="eui-icon eui-icon-back" href="javascript:;" id="btn_back_phone_code"></a>
        </div>        
        <h1 class="eui--blue-color eui--font-w-normal eui--font-48 eui--text-center page-title">{{__("login_phonecode_page_tittle")}}</h1>    
        <p class="page-title-second eui--556c96-color eui--font-26">
            {{__("login_phonecode_page_tips_1")}} <span class="phone-num">XX-XXXXXXXXXXX</span>{{__("login_phonecode_page_tips_2")}}
        </p>
    
        <div class="eui-login-form eui--margin-t-0">
            <div class="input-list eui--text-center">
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div>    
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div> 
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div> 
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div>  
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div> 
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div>           
            </div>
            <a class="eui-btn eui--width-100 eui-btn-lg eui-btn-primary eui--margin-t-100" id="btn_phone_code" href="javascript:;">{{__("btn_resend")}}</a>
        </div>
    </div>

    <div class="register-phone-pwd eui--hide" id="register_phone_pwd">
        <div class="login-back-register">
            <a class="eui-icon eui-icon-back" href="javascript:;" id="btn_back_phone_pwd"></a>
        </div>
    
        <h1 class="eui--blue-color eui--font-w-normal eui--font-48 eui--text-center page-title">{{__("set_password")}}</h1>
    
        <div class="eui-login-form">
            <div class="eui-form-group"> 
                <label for="userName" class="eui-lable eui--font-26 eui--black-color">
                    {{__("password")}}
                </label>
                <input id="userName" class="eui-input eui--font-26" type="text" placeholder="请输入密码">
                <div class="eui--pull-right eui--text-r">
                    <span class="eui-icon eui-icon-eye_open"></span>
                </div>
            </div>
            <div class="tips-text eui--margin-y-20">
                <p class="eui--949494-color eui--font-24">{{__("password_input_tips_1")}}</p>
                <p class="eui--949494-color eui--font-24">{{__("password_input_tips_2")}}</p>
            </div>
            <div class="agree eui--margin-y-20">           
                <label>
                    <input type="checkbox" name="radioName" id="agree-text" hidden/>
                    <label for="agree-text" class="eui-login-radio"></label>
                    <span class="radio-name">{{__("login_procity_agree_tips_1")}}
                        <a class="eui--blue-color" href="javascript:;">{{__("login_procity_agree_tips_2")}}</a>{{__("login_procity_agree_tips_3")}}
                        <a class="eui--blue-color" href="javascript:;">{{__("login_procity_agree_tips_4")}}</a>
                    </span>
                </label>
            </div>    
            <a class="eui-btn eui--width-100 eui-btn-lg eui-btn-primary eui--margin-t-100" href="javascript:;">{{__("btn_register")}}</a>
        </div>
    </div>
    <div class="login-for-help eui--text-center">
        <a class="eui--556c96-color eui--font-26" href="/login/question"> {{__("login_help")}}</a>
    </div>
</div>
{% endblock %}